<template>
  <div>
    <!-- 添加 flex 布局容器包裹表单元素 -->
    <div class="form-container">
      <div class="form-item">
        <span>账号：</span>
        <el-input v-model="input" placeholder="请输入账号" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>时间：</span>
        <div class="time-inputs">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
        </div>
      </div>

      <div class="form-buttons">
        <el-button type="primary">查询</el-button>
        <el-button type="success">重置</el-button>
      </div>
    </div>

    <!-- 添加 class="custom-header-table" 到 el-table -->
    <el-table :data="tableData" border style="width: 100%" class="custom-header-table">
      <el-table-column fixed prop="date" label="管理员账号">
      </el-table-column>
      <el-table-column prop="name" label="管理员密码">
      </el-table-column>
      <el-table-column prop="account" label="管理员身份">
      </el-table-column>
      <el-table-column prop="phoneNumber" label="创建时间">
      </el-table-column>

      <!-- 操作列宽度设置为150px -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改密码</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!-- 分页组件：左对齐并距离表格10px -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>


</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },

  data() {
    return {
      input: '',

      options: [{
        value: '选项1',
        label: '正常'
      }, {
        value: '选项2',
        label: '禁用'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',


      tableData: [{
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '普陀区',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '18650557412',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: 'user01',
        phoneNumber: '普陀区',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        zip: 200333
      }, {
        date: '正常',
        name: '王小虎',
        account: '上海',
        phoneNumber: '普陀区',
        avatar: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }

}
</script>


<style scoped>
/* 新增表单容器样式 */
.form-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

/* 表单项样式调整 */
.form-item {
  display: flex;
  align-items: center;
}

.form-item span {
  margin-right: 8px;
  white-space: nowrap;
}

/* 时间输入框容器 */
.time-inputs {
  display: flex;
  gap: 10px;
}

/* 按钮容器样式 */
.form-buttons {
  display: flex;
  gap: 10px;
}

/* 分页样式保持不变 */
.pagination-left {
  margin-top: 10px;
  text-align: left;
}

/* 新增：表头高度调整 */
.custom-header-table ::v-deep .el-table__header th {
  height: 48px;
  /* 合理的高度值 */
  line-height: 48px;
  /* 垂直居中 */
  padding: 0;
  /* 移除默认内边距 */
  background-color: #f5f7fa;
  /* 添加背景色，可选 */
  font-weight: bold;
  /* 加粗字体 */
}

/* 表头单元格内容样式 */
.custom-header-table ::v-deep .el-table__header .cell {
  line-height: 48px;
  /* 确保内容垂直居中 */
}
</style>
